<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .alink {
            font-size: 14px;
            color: #000;
            text-decoration: none;
            border: 1px solid #767676;
            /* width: 42px; */
            /* height: 28px;
            line-height: 28px; */
            /* CSS display 属性设置元素是否被视为块级或行级盒子以及用于子元素的布局，例如流式布局、网格布局或弹性布局。 */
            display: inline-block;
            /* text-align: center;*/

            padding: 3px 7px;
            /* cursor CSS 属性设置光标的类型（如果有），在鼠标指针悬停在元素上时显示相应样式。 */
            cursor: default;
            /* 边框变成圆角 */
            border-radius: 2px;
            background-color: #efefef
        }
        /* :hover CSS 伪类在用户使用指针设备与元素进行交互时匹配，但不一定激活它。通常情况下，用户将光标（鼠标指针）悬停在元素上时触发。 */
        .alink:hover {
            background-color: #e5e5e5;
            border-color: #4f4f4f;
        }
    </style>
</head>
<body>
    <p><a href="#" class="alink">链接</a></p>
    <p><button type="button">按钮</button></p>
</body>
</html>